<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html class="no-js">
<head>
  <title>二手市场首页</title>
  <%@ include file="../mobile_inc.jsp" %>
<script>
		//获得商品和公告
		$(document).on('pageinit', function () {
			  document.getElementById('hiddenbut').style.display = "none";
		    $.ajax({
		        url: '${ctx}/mobile/getCommodity',
		        dataType: "json",
		        async: true,
		        success: function (result) {		        	
		        	if(result.obj != null){
		        		var content = new Array();
		        		for(var i=0;i<result.obj.length;i++){
		        			var values = result.obj[i].flag;
		        			if(values == 1)
		        		   	{
		        				values= "<font color='green'>求购</font>";
		        		   	}
		        		   	else if(values == 2)
		        		   	{
		        		   		values= "<font color='red'>出售</font>";
		        		   	}
		        			content[i] = "<li> <div id='mydiv' class='am-gallery-item'>  <a href='${ctx}/mobile/commoditySkip?id="+result.obj[i].marketId+"' target='_self' class=''><img id='imgs'  src='"+result.obj[i].photo+"'><h3 class='am-gallery-title'>"+result.obj[i].summary+"</h3><small><div class='am-gallery-desc'>电&nbsp&nbsp话:"+result.obj[i].phone+"</small><br><font size=\"1\" color=\"red\">￥</font><font size=\"4\" color=\"red\">"+result.obj[i].price+"</font>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<font>"+values+"</font></div></p></a></div></li> ";
			        	}
		        		$("#queryCom").empty();
		        		$("#queryCom").append("<ul data-am-widget=\"gallery\" class=\"am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-bordered\" data-am-gallery=\"{  }\"><h2><span></span>良心推荐</h2>"+content.join(" ")+"</ul>");
		        		
		        		if(result.rows != null){
			        		var contents = new Array();
			        		var pubTime;
			        		var depName;
			        		for(var i=0;i<result.rows.length;i++){
			        			pubTime = formatDate(result.rows[i].pubTime);
			        			if(result.rows[i].sysDepartment != null){
			        				depName = result.rows[i].sysDepartment.depName
			        			}else{
			        				depName = "系统发布";
			        			}
			        			contents[i] = "<div class='am-popup-bd'>"+(i+1)+"、&nbsp;标题:"+result.rows[i].title+"<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp内容:"+result.rows[i].content+"<br><p class='am-kai'><small>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp发布单位:&nbsp;&nbsp;"+depName+"<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp发布时间:&nbsp;&nbsp;"+pubTime+"</small></p></div><hr data-am-widget=\"divider\" style=\"\" class=\"am-divider am-divider-default\" />";
			        			}
			        		
			        		$("#ajax-popup").append(contents.join(" "));
			        	}
		        		
		        		
		        	}
  
		        },
		        error: function (request, error) {
		        	$("#queryCom").append("<div class='am-alert'> 暂时没有二手商品信息哦 ！ </div>");
		        }
		        
		    });

		    
		});
		
		//格式化日期
		function formatDate (strTime) {
		    var date = new Date(strTime);
		    return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
		}
		 
		 function checkSubmit()
		 {
			 var phone = $("#feed_phone").val();
			 var sub_btn = document.getElementById('sub_butt');
		 	 //var flag = $('input:radio[name="radio"]:checked').val();
		 	 var content =  $("#feed_content").val();
		 	content = encodeURI(encodeURI(content)); 
		  
		   if (content == null || content == "" || isNull( content )) {
			   	$("#alertmsg").empty();
		 		 $("#alertmsg").append("<div class='am-alert am-alert-success' am-alert-alert><button type='button' class='am-close'>&times;</button><p>请输入你想说的话！</p></div>");
	            document.myform.feed_content.focus();
	            return false;
	     } 
		   
		   if (phone == null || phone == "" ) {
			   	$("#alertmsg").empty();
		 		 $("#alertmsg").append("<div class='am-alert am-alert-success' am-alert-alert><button type='button' class='am-close'>&times;</button><p>请填写手机号！</p></div>");
		            document.myform.phone.focus();
		            return false;
		     }
		   sub_btn.disabled=true;
		 	setTimeout(function (){
		 		sub_btn.disabled=false;	 
			},60000);
		   
		   var $modal = $('#sub-pro');
           var url = "${ctx}/mobile/feedBack?phone="+phone+"&content="+content;
           $.getJSON(url, function(json){
               if(json.success==0)
               {
              	
              	 $("#alertmsg").empty();
              	 $modal.modal('close');
              	 document.getElementById("sub_target").click();
               }
               else
               {
              	 $("#alertmsg").empty();
			 		 $("#alertmsg").append("<div class='am-alert'> "+json.msg+" </div>");
               }
               $('#myform')[0].reset();
             
           });
		           return true;  
		 }
		 
		 
		 function isNull( str ){
				if ( str == "" ) return true;
				var regu = "^[ ]+$";
				var re = new RegExp(regu);
				return re.test(str);
			}
		 
		var scontent;
		var pageArray = [];
		var allCount;//获取总记录条数
		var allPage;//计算出总共页数
		var currentPage = 1;//设置当前页
		var rows = 10;//设置每页列数
		
		function searchComm(){
			scontent =  encodeURI(encodeURI($("#search-content").val()));
			if(scontent == null || scontent == "" || isNull( scontent )){
				alert("请输入搜索条件！");
			}else{
				loadMsg(1);
			}
			
		}
		
		function loadMsg(page){
			currentPage = page;
			$.ajax({
		        url: '${ctx}/mobile/searchComm?content='+scontent+'&page='+page+'&rows='+rows+'',
		        dataType: "json",
		        async: true,
		        success: function (result) {
		        	
		        	//分页相关
		        	allCount =  result.rows;
		        	allPage  = Math.ceil(allCount/rows);//总页数
		        	
		        	var upPage;//上一页
		        	if(currentPage-1 <= 0){
		        		upPage = 1;
		        	}else{
		        		upPage = currentPage-1;
		        	}
		        	var downPage;//下一页
		        	if(currentPage+1 > allPage){
		        		downPage = allPage;
		        	}else{
		        		downPage = currentPage+1;
		        	}
		        	$("#top_count_num").empty();
		        	$("#count_num").empty();
		        	var td_need = " <br/> <ul data-am-widget='pagination' class='am-pagination am-pagination-default' >"+
		        	" <li class='am-pagination-first'> <a href='#' onclick='loadMsg(1);' target='_self' class=''> 首页</a> </li>"+		
		        	" <li class='am-pagination-prev'> <a href='#' onclick='loadMsg("+upPage+");' target='_self' class=''>上页</a> </li>"+
		        	"<li class='am-pagination-next'> <a href='#' target='_self' onclick='loadMsg("+downPage+");' class=''>下页</a> </li>"+
		        	"<li class='am-pagination-last'> <a href='#'  target='_self' onclick='loadMsg("+allPage+");' class=''>末页</a> </li>  </ul>";
		        	$("#top_count_num").append(td_need);
		        	//$("#count_num").append(td_need);
		        	
		        	
		        	var down_need_num = "  <ul data-am-widget='pagination' class='am-pagination am-pagination-default' > </ul>";
		        	$("#count_num").append(down_need_num);
		        	for(var i=1;i<=allPage;i++){
		        		pageArray[i] = i;
		        		ulNum = "<li class=''><a href='#' class='am-active' onclick='loadMsg("+pageArray[i]+");' target='_self' >"+pageArray[i]+"</a></li>";
		    			$("#count_num ul").append(ulNum);
		    		}

		        	if(result.obj != null && result.obj.length > 0){
		        		var contentss = new Array();
		        		for(var i=0;i<result.obj.length;i++){
		        			contentss[i] = "<li> <div id='mydiv' class='am-gallery-item'>  <a href='${ctx}/mobile/commoditySkip?id="+result.obj[i].commodityId+"' target='_self' class=''><img id='imgs'   src='"+result.obj[i].photo+"'><div class='am-gallery-title'> <h3>"+result.obj[i].names+"</h3></div><div class='am-gallery-desc'><p>剩"+result.obj[i].number+"件&nbsp;&nbsp;售价"+result.obj[i].price+"</p></div></a></li> ";
			        	}
		        		$("#my-search-content").empty();
		        		$("#my-search-content").append("<ul data-am-widget=\"gallery\" class=\"am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-bordered\" data-am-gallery=\"{  }\"  ><h2><span></span>搜索结果</h2>"+contentss.join(" ")+"</ul>");
		        		
		        		
		        	}else{
		        		$("#my-search-content").empty();
		        		$("#my-search-content").append("<center>没有找到相关商品！</center>");
		        	}
		
		        },
		        error: function (request, error) {
		        	$("#my-search-content").empty();
	        		$("#my-search-content").append("<center>没有找到相关商品！</center>");
		        }
		        
		    });
		}
</script>
<style type="text/css">
#queryCom img {
   width:120px;
   height:160px;
   border: 5px;
   margin: 5px;
   border-color: gray
}
#mydiv{
	border: 1px solid white;
	text-align: left;
	padding: 2px
}
#myform{
	margin-left: 5px;
	margin-right: 5px;
}
#my-popup{
	background-color:#F0FFF0;
}
.am-popup-bd{
	background-color:#F0FFF0;
}
</style>
</head>
<body style=" background: #F0FFF0;">
<header data-am-widget="header" class="am-header am-header-default joan-head" style="background:#FFB6C1;z-index:999;position: fixed; top: 0; left: 0;border: 1px solid #ddd;">
			
			<div class="gm-head-search">
         		<a data-am-modal="{target: '#my-popup-search'}" href="#"  ><input style="width:200px" type="text" placeholder="大家都在搜："></a>
      		</div>

			<div class="gm-head-right">
         		<a href="${ctx }/mobile/"  target="_self" class="">
                <i class="am-header-icon am-icon-home"></i></a>
			</div>
			
		</header>
<div data-am-widget="slider" class="am-slider am-slider-b2" data-am-slider='{"controlNav":false}'>
  <ul class="am-slides">
  	<li>
      <img src="/mobile/images/aaa.jpg">
    </li>
	  <li>
      <img src="/mobile/images/bbb.jpg">
    </li> 
    <li>
      <img src="/mobile/images/ccc.jpg">
    </li>
  </ul>
</div>
<div class="case-nav">
<ul>
  <li>
    <div class="am-gallery-item">
      <a href="${ctx }/mobile/market" target="_self" class="case-nav-p">
        <img src="/mobile/images/icon/15.jpg">
        <p>商品详情</p>
      </a>
    </div>
  </li>
	<li>
    <div class="am-gallery-item">
      <a data-am-modal="{target: '#my-popup'}" href="#" class="case-nav-p">
        <img src="/mobile/images/icon/11.jpg">
        <p>公告消息</p>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="${ctx }/mobile/about" target="_self" class="case-nav-p">
        <img src="/mobile/images/icon/13.jpg">
        <p>关于我们</p>
      </a>
    </div>
  </li>
  <li>
    <div class="am-gallery-item">
      <a href="${ctx }/mobile/help" target="_self" class="case-nav-p">
        <img src="/mobile/images/icon/14.jpg">
        <p>帮助中心</p>
      </a>
    </div>
  </li>
   
</ul>
</div>



<hr data-am-widget="divider" style="" class="am-divider am-divider-default" />


<div id="queryCom" class="product">
<!-- 动态显示商品 -->
<div align="center"><i class="am-icon-spinner am-icon-spin"></i></div>
</div>
	

<!--公告提示卡  -->
<div class="am-popup" id="my-popup">
  <div class="am-popup-inner" id="ajax-popup"  >
    <div class="am-popup-hd">
      <h4 class="am-popup-title">公告信息</h4>
      <span data-am-modal-close
            class="am-close">&times;</span>
    </div>
  </div>
</div>

<!--提交问题  -->
<div class="am-popup" id="sub-pro">
  <div class="am-popup-inner" id="ajax-pro"  >
    <div class="am-popup-hd">
      <h4 class="am-popup-title">反馈</h4>
      <span data-am-modal-close
            class="am-close">&times;</span>
    </div>
    
     <!--  -->
     
     <div class="am-g">
  <div class=" col-md-8 col-sm-centered">
  <div id="alertmsg"></div>
  
    <form class="am-form" id="myform" method="POST" name="myform" onsubmit="return checkSubmit()">
      <fieldset class="am-form-set">
      	<textarea class="" rows="3" maxlength="100" name="feed_content" id="feed_content" placeholder="输入你想对我们说的话"></textarea><br/>
        <input type="text" maxlength="11" onkeyup="value=value.replace(/[^1234567890]+/g,'')" id="feed_phone" name="phone" placeholder="输入你的手机"><br/>
     	<!--  你是否愿意将此信息发布在 <b>帮助中心</b> ?
		     <div id="divRole" class="am-form-group">
					<label><input type="radio" name="radio" id="radio1" value="9" checked /> 是</label><label><input type="radio" name="radio" id="radio2" value="1" /> 否</label>
             </div>
		-->


      </fieldset>
      <input type="submit" id="sub_butt" name="sub_butt" data-ajax="false"  class="am-btn am-btn-success am-btn-block"/>
    </form>
  </div>
</div>
     
     
     <!--  -->
  </div>
</div>

<!-- 提示卡 -->
<div id="hiddenbut"><button
  type="button" id="sub_target"
  class="am-btn am-btn-primary"
  data-am-modal="{target: '#my-alert'}">
</button></div>
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-bd">
      提交成功,在帮助中心可查看我们的回复,请耐心等待！
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<!--搜索  -->
	<div class="am-popup" id="my-popup-search">
		<span data-am-modal-close class="am-close">&times;</span>
		<div class="am-popup-inner" id="ajax-popup">
			<div class="am-popup-hd">
				<h4 class="am-popup-title">搜索</h4>
				<span data-am-modal-close class="am-close">&times;</span>
				<div><br/>
			<form class="am-form-inline" role="form">
				<div class="am-form-group">
					<input type="text" size="50" id="search-content" maxlength="10" class="am-form-field" placeholder="输入你想要搜索的商品">
				</div>
				&nbsp;&nbsp;<button type="button" onclick="searchComm();" class="am-btn am-btn-success">搜索</button>
			</form>
			</div>
			</div>
			
			<div>
				<!-- 分页 -->
				<div id="top_count_num"></div>
				
				<div id="my-search-content"></div>
				
				<!-- 分页 -->
				<div id="count_num"></div>
			</div>
		</div>
	</div>
<br/>
<div align="center"><button data-am-smooth-scroll="{position: 0, speed: 2500}" class="am-btn am-btn-success">回到顶部&nbsp;&nbsp;<i class="am-gotop-icon am-icon-chevron-up"></i></button></div>

	<!--底部 -->
${bottom}


</body>
</html>
